<template>
	<view class="dashboard-container" style="pointer-events: auto;">
		<!-- 数据概览卡片 -->
		<view class="data-cards">
			<view class="card" v-for="(item, index) in statistics" :key="index">
				<view class="card-content">
					<view class="card-value">{{ item.value }}</view>
					<view class="card-title">{{ item.title }}</view>
				</view>
				<uni-icons :type="item.icon" size="36" color="#1890ff"></uni-icons>
			</view>
		</view>

		<!-- 图表区域 -->
		<view class="charts-container">
			<!-- 销售趋势图 -->
			<view class="chart-box">
				<view class="chart-header">
					<text class="chart-title">销售趋势</text>
					<uni-data-select v-model="timeRange" :localdata="timeOptions" @change="handleTimeChange" />
				</view>
				<view class="chart-content">
					<qiun-data-charts type="line" :opts="lineOpts" :chartData="salesData" />
				</view>
			</view>

			<!-- 销售分布图 -->
			<view class="chart-box">
				<view class="chart-header">
					<text class="chart-title">销售分布</text>
				</view>
				<view class="chart-content">
					<qiun-data-charts type="pie" :opts="pieOpts" :chartData="distributionData" />
				</view>
			</view>
		</view>

		<!-- 最新订单列表 -->
		<view class="recent-orders">
			<view class="section-header">
				<text class="section-title">最新订单</text>
				<navigator url="/pages/order/list" class="more-link">
					查看更多
					<uni-icons type="right" size="14"></uni-icons>
				</navigator>
			</view>

			<uni-table stripe emptyText="暂无数据">
				<uni-tr>
					<uni-th align="center">订单编号</uni-th>
					<uni-th align="center">商品信息</uni-th>
					<uni-th align="center">订单金额</uni-th>
					<uni-th align="center">支付状态</uni-th>
					<uni-th align="center">下单时间</uni-th>
				</uni-tr>
				<uni-tr v-for="(order, index) in recentOrders" :key="index">
					<uni-td>{{ order.orderNo }}</uni-td>
					<uni-td>{{ order.goodsName }}</uni-td>
					<uni-td>¥{{ order.amount }}</uni-td>
					<uni-td>
						<uni-tag :text="order.status" :type="order.status === '已支付' ? 'success' : 'warning'" />
					</uni-td>
					<uni-td>{{ order.createTime }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
export default {
	name:'sub-indedx-index',
	data() {
		return {
			timeRange: 'week',
			timeOptions: [
				{ value: 'week', text: '最近一周' },
				{ value: 'month', text: '最近一月' },
				{ value: 'year', text: '最近一年' }
			],

			// 统计数据
			statistics: [
				{ title: '总销售额', value: '¥126,560', icon: 'money' },
				{ title: '订单总数', value: '1,280', icon: 'cart' },
				{ title: '用户总数', value: '8,846', icon: 'person' },
				{ title: '新增用户', value: '156', icon: 'plus' }
			],

			// 销售趋势数据
			salesData: {
				categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				series: [{
					name: '销售额',
					data: [150, 230, 224, 218, 135, 147, 260]
				}]
			},

			// 销售分布数据
			distributionData: {
				series: [{
					data: [
						{ name: '食品饮料', value: 35 },
						{ name: '服装鞋包', value: 28 },
						{ name: '电子产品', value: 24 },
						{ name: '家居用品', value: 13 }
					]
				}]
			},

			// 最新订单数据
			recentOrders: [
				{
					orderNo: 'DD20240301001',
					goodsName: 'iPhone 15 Pro Max',
					amount: '9999.00',
					status: '已支付',
					createTime: '2024-03-01 10:25:36'
				},
				{
					orderNo: 'DD20240301002',
					goodsName: 'MacBook Pro M3',
					amount: '15999.00',
					status: '待支付',
					createTime: '2024-03-01 11:30:42'
				}
			],

			// 图表配置
			lineOpts: {
				color: ['#1890ff'],
				padding: [15, 10, 0, 15],
				legend: { show: false },
				xAxis: { boundaryGap: false },
				yAxis: { splitLine: { lineStyle: { type: 'dashed' } } }
			},

			pieOpts: {
				padding: [15, 15, 0, 15],
				legend: { position: 'right' },
				series: {
					radius: ['50%', '70%'],
					avoidLabelOverlap: false,
					label: { show: false },
					emphasis: {
						label: { show: true }
					}
				}
			}
		}
	},

	methods: {
		handleTimeChange(e) {
			// 根据时间范围更新图表数据
			// 这里模拟数据更新
			const mockData = {
				week: [150, 230, 224, 218, 135, 147, 260],
				month: [320, 332, 301, 334, 390, 330, 320],
				year: [820, 932, 901, 934, 1290, 1330, 1320]
			}

			this.salesData.series[0].data = mockData[e]
		}
	}
}
</script>

<style lang="scss">
.dashboard-container {
	padding: 20px;

	.data-cards {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
		margin-bottom: 20px;

		.card {
			background: #fff;
			padding: 20px;
			border-radius: 4px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: space-between;
			align-items: center;

			.card-content {
				.card-value {
					font-size: 24px;
					font-weight: bold;
					color: #303133;
					margin-bottom: 8px;
				}

				.card-title {
					font-size: 14px;
					color: #909399;
				}
			}
		}
	}

	.charts-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		margin-bottom: 20px;

		.chart-box {
			background: #fff;
			padding: 20px;
			border-radius: 4px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

			.chart-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20px;

				.chart-title {
					font-size: 16px;
					font-weight: bold;
				}
			}

			.chart-content {
				height: 300px;
			}
		}
	}

	.recent-orders {
		background: #fff;
		padding: 20px;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;

			.section-title {
				font-size: 16px;
				font-weight: bold;
			}

			.more-link {
				color: #1890ff;
				display: flex;
				align-items: center;

				.uni-icons {
					margin-left: 4px;
				}
			}
		}
	}
}
</style>